<template>
<view class="authentication-box">
  <view class="cu-steps">
    <view class="cu-item" :class="index > step?'':'text-orange'" v-for="(item,index) in stepList" :key="index">
      <text class="num" :data-index="index + 1"></text> {{item.name}}
    </view>
  </view>

  <view class="authentication-content margin-top-xl">
    <!-- 身份证认证 -->
    <view class="flex flex-direction align-center animation-slide-right" v-if="step === 0">
      <view class="id-box" @tap="selectIdImage('Front')">
        <view class="id-card id-front bg-white shadow shadow-lg padding flex flex-wrap flex-direction" v-if="!hasFrontImage">
          <image class="id-icon" src="/static/id_front.png"></image>
          <view class="id-bar length-sm"></view>
          <view class="id-bar"></view>
          <view class="id-bar"></view>
          <view class="id-bar length-lg"></view>
          <view class="id-carmera text-xsl text-blue"><text class="id-carmera cuIcon-camerafill"></text></view>
          <view class="id-corner top-left"></view>
          <view class="id-corner top-right"></view>
          <view class="id-corner bottom-left"></view>
          <view class="id-corner bottom-right"></view>
        </view>
        <image v-if="hasFrontImage" class="id-image bg-white shadow shadow-lg" :src="imgSrcFront" mode="aspectFill"></image>
        <view class="margin-top text-lg">点击拍摄身份证人像面</view>
      </view>

      <view class="id-box margin-top-xl" @tap="selectIdImage('Back')">
        <view class="id-card id-back bg-white shadow shadow-lg padding flex flex-wrap flex-direction align-end" v-if="!hasBackImage">
          <image class="id-icon" src="/static/id_back.png"></image>
          <view class="id-bar length-sm"></view>
          <view class="id-bar"></view>
          <view class="id-bar"></view>
          <view class="id-bar length-lg"></view>
          <view class="id-carmera text-xsl text-blue">
            <text class="id-carmera cuIcon-camerafill"></text>
          </view>
          <view class="id-corner top-left"></view>
          <view class="id-corner top-right"></view>
          <view class="id-corner bottom-left"></view>
          <view class="id-corner bottom-right"></view>
        </view>
        <image v-if="hasBackImage" class="id-image bg-white shadow shadow-lg" :src="imgSrcBack" mode="aspectFill"></image>
        <view class="margin-top text-lg">点击拍摄身份证国徽面</view>
      </view>

      <view class="id-actions margin-top-xl">
        <view class="agreement flex align-center justify-center">
          <checkbox class='orange' :class="ifAgree ? 'checked' : ''" :checked="ifAgree" value="A" style="transform:scale(0.7)" @tap="agreementChange"></checkbox>
          <view class="text-xs">点击勾选代表您已同意<text class="text-orange" @tap="previewProtocol(1)">《恐龙租机个人信息收集授权书》</text></view>
        </view>
        <view class="flex flex-direction">
          <button type="" class="cu-btn dm-btn round bg-orange margin-tb-sm text-lg" @tap="confirmUploadIdImage" :disabled="!ifOkToUpload">下一步</button>
        </view>
      </view>
    </view>
    <!-- 信息确认 -->
    <view class="id-info-box animation-slide-right" v-else-if="step === 1">
      <view class="padding-lr margin-tb-sm text-gray">仅用于全国公民身份查询中心核实身份</view>
      <view class="padding-lr margin-tb-sm text-gray">请核对自动识别结果,如有误请<text class="text-bold text-orange" @tap="onRedo">重新拍摄</text></view>
      <view class="cu-list menu">
        <view class="cu-item">
          <view class="content"><text class="text-gray">姓名</text></view>
          <view class="action">{{truename}}</view>
        </view>
        <view class="cu-item">
          <view class="content"><text class="text-gray">性别</text></view>
          <view class="action">{{GENDER_LIST[gender]}}</view>
        </view>
        <view class="cu-item">
          <view class="content"><text class="text-gray">身份证号码</text></view>
          <view class="action">{{idcard}}</view>
        </view>
        <view class="cu-item">
          <view class="content"><text class="text-gray">地址</text></view>
          <view class="action">{{address}}</view>
        </view>
      </view>

      <view class="id-actions w100 margin-top-xl padding-lr">
        <button type="" class="cu-btn w100 dm-btn round bg-orange margin-tb-sm text-lg" @tap="onNext">下一步</button>
      </view>
    </view>

    <!-- 活体认证 -->
    <view class="animation-slide-right" v-else-if="step === 2">
      <view class="margin-top-xl padding-lr">
        <button type="" class="cu-btn w100 dm-btn round bg-orange margin-tb-sm text-lg" @tap="gotoLiveness">点击进行活体认证</button>
      </view>
    </view>

    <view v-else>
      <view class="solids-bottom padding-xs flex align-center animation-slide-right">
        <view class="flex-sub text-center">
          <view class="solid-bottom text-xsl padding">
            <text class=" cuIcon-roundcheckfill text-green"></text>
          </view>
          <view class="padding">实名认证成功!</view>
          <view class="padding text-orange text-underline" @tap="goback">返回资料认证页面</view>
        </view>
      </view>
    </view>

  </view>
</view>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'authentication', // 实名认证
  data () {
    return {
      step: 0,
      stepList: [
        { name: '身份证认证'},
        { name: '信息确认' },
        { name: '活体认证' },
        { name: '完成' }
      ],
      ifAgree: false,
      ifOkToNext: true,
      imgSrcFront: '',
      imgSrcBack: ''
    }
  },
  computed: {
    ...mapGetters([
      'GENDER_LIST',
      'userBasicInfo'
    ]),
    hasFrontImage() {
      return this.imgSrcFront || this.imgSrcFront !== ''
    },
    hasBackImage() {
      return this.imgSrcBack || this.imgSrcBack !== ''
    },
    ifOkToUpload() {
      return this.hasFrontImage && this.hasBackImage && this.ifAgree
    },
    uploadParams() {
      let params = {
        custom: {auth: true},
        files: [
          { name: 'front_file', uri: this.imgSrcFront },
          { name: 'reverse_file', uri: this.imgSrcBack }
        ]
      }
      return params
    },
    truename() {
      return this.userBasicInfo.truename
    },
    idcard() {
      return this.userBasicInfo.idcard
    },
    address() {
      return this.userBasicInfo.id_address
    },
    gender() {
      return this.userBasicInfo.gender
    },
    ifPassedIdImage() {
      return this.truename && this.idcard && this.address
    },
    ifPassedLiveness() {
      return this.userBasicInfo.isauth === 1
    }
  },
  watch: {
    step(newVal) {
      const navTitle = this.stepList[newVal].name
      this.$store.dispatch('setPageTitle', navTitle)
    },
    ifPassedLiveness(newVal) {
      console.log('ifPassedLiveness CHANGE', newVal)
      if (newVal) {
        this.step = 3
      }
    }
  },
  async onShow() {
    await this.getUserBasicInfo()
    if (this.ifPassedIdImage && !this.ifPassedLiveness) { // 已认证身份证, 但是没有完成活体
      this.step = 2
    } else if (this.ifPassedLiveness) {
      this.step = 3
    }
  },
  methods: {
    async selectIdImage(type) {
      console.log('selectIdImage', type)
      this[`imgSrc${type}`] = await this.$store.dispatch('captureImage')
      console.log('image src:', this[`imgSrc${type}`])
    },
    async confirmUploadIdImage() {
      if (!this.hasFrontImage || !this.hasBackImage) return
      console.log('confirmUploadIdImage', this.uploadParams)
      await this.uploadIdImage()
      await this.getUserBasicInfo()
      // 上传成功, 继续下一步
      this.onNext()
    },
    /** 上传身份证 */
    uploadIdImage() {
      return new Promise(resolve => {
        this.$api.uploadIdentity(this.uploadParams).then(res => {
          console.log('上传身份证', res)
          if (!res) return
          resolve()
        })
      })
    },
    /** 获取用户基本信息 */
    getUserBasicInfo() {
      return new Promise(resolve => {
        this.$api.getUserBasicInfo().then(res => {
          console.log('用户基本信息', res)
          if (!res) return
          const resData = res.data
          this.$store.commit('SET_USER_BASIC_INFO', resData)
          resolve()
        })
      })
    },
    /** 重新拍摄身份证 */
    onRedo() {
      this.step = 0
      this.ifAgree = false
    },
    agreementChange() {
      this.ifAgree = !this.ifAgree
    },
    previewProtocol() {},
    onNext() {
      this.step = this.step === this.stepList.length ? 0 : this.step + 1
    },
    gotoLiveness() {
      this.$Router.push({
        name: 'liveness',
        animation:{
          animationType:'slide-in-bottom',
          animationDuration: 300
        }
      })
    },
    goback() {
      this.$Router.back()
    }
  }
}
</script>

<style lang="less">
.id-box {
  text-align: center;
}
.id-image {
  width: 480rpx;
  height: 280rpx;
  border-radius: 10rpx;
}

.id-card {
  position: relative;
  width: 480rpx;
  height: 280rpx;
  border-radius: 10rpx;

  &.id-front .id-icon {
    top: 30rpx;
    right: 30rpx;
  }

  &.id-back .id-icon {
    top: 30rpx;
    left: 30rpx;
  }
}
.id-icon {
  position: absolute;
  width: 140rpx;
  height: 140rpx;
}

.id-carmera {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
}

.id-bar {
  position: relative;
  width: 55%;
  height: 26rpx;
  margin: 12rpx 0;
  background-color: #eee;
  border-radius: 50rpx;

  &.length-sm {
    width: 30%;
  }
  &.length-lg {
    width: 90%;
  }
}

.id-corner {
  position: absolute;
  width: 30rpx;
  height: 30rpx;
  z-index: 10;
  background-image: url(/static/id_frame.png);
  background-repeat: no-repeat;
  background-size: contain;

  &.top-left {
    top: -24rpx;
    left: -24rpx;
  }
  &.top-right {
    top: -24rpx;
    right: -24rpx;
    transform: rotate(90deg);
  }
  &.bottom-right {
    bottom: -24rpx;
    right: -24rpx;
    transform: rotate(180deg);
  }
  &.bottom-left {
    bottom: -24rpx;
    left: -24rpx;
    transform: rotate(-90deg);
  }
}

.id-info-box {
  width: 100%;
}
</style>
